body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: rgb(0, 0, 0); /* Fondo negro */
}

.header-container {
    position: relative; /* Para la posición relativa del contenido */
    height: 300px; /* Altura de la sección con la imagen */
}

.background-image {
    position: absolute; /* Mantener la imagen fija */
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Ocupar toda la altura */
    background-image: url('fondo/Vinyl Plank.jpg'); /* Reemplaza con tu imagen */
    background-size: cover; /* Asegurarse de que la imagen cubra el área */
    background-position: center; /* Centrar la imagen */
    z-index: 0; /* Enviar al fondo */
}

.icon {
    width: 70px; /* Ancho del icono */
    height: 70px; /* Altura del icono */
    position: absolute; /* Posicionar el icono */
    top: 20px; /* Ajustar según sea necesario */
    left: 20px; /* Ajustar según sea necesario */
    z-index: 1; /* Por encima de la imagen de fondo */
}

.title-container {
    position: absolute;
    top: 20px; /* Ajustar según sea necesario */
    left: 100px; /* Ajustar según sea necesario */
    z-index: 1; /* Por encima de la imagen de fondo */
    border-bottom: 6px solid red;
    color: white;
    
}

.menu-container {
    position: absolute;
    top: 20px; /* Ajustar según sea necesario */
    right: 20px; /* Ajustar según sea necesario */
    z-index: 1; /* Por encima de la imagen de fondo */
}

.menu {
    list-style-type: none; /* Eliminar puntos de lista */
    padding: 0;
    margin: 0;
    display: flex; /* Usar flexbox para el menú horizontal */
}

.menu li {
    margin: 0 15px; /* Espacio entre elementos del menú */
}

.menu a {
    text-decoration: none; /* Eliminar subrayado de enlaces */
    color: #fff; /* Color del texto (blanco para mejor contraste) */
    padding: 10px 15px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Esquinas redondeadas */
    transition: background-color 0.3s; /* Transición para efecto hover */
}

.menu a:hover {
    background-color: #007BFF; /* Color de fondo al pasar el ratón */
    color: white; /* Color del texto al pasar el ratón */
}

.content {
    padding: 20px; /* Espaciado alrededor del contenido */
    margin-top: 20px; /* Espacio superior entre la imagen y el contenido */
}
.ambientaciones-title {
    color: white; /* Color del texto */
    text-align: center; /* Centrar el texto */
    margin: 50px 0; /* Espacio alrededor del título */
    border-bottom: 2px solid red; /* Línea roja debajo del título */
    padding-bottom: 10px; /* Espacio entre el texto y la línea */
}

.content h1 {
    color: white;
    text-align: center;
    margin: 50px 0; /* Ajusta el margen superior aquí para cambiar el espaciado del título */
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 20px 10%; /* Espacio en los laterales de la galería */
}

.image-item {
    text-align: center; /* Centrar el texto debajo de la imagen */
}

.image-gallery img {
    width: 70%; /* Ajustar el ancho de las imágenes para que se adapten */
    height: auto; /* Mantener la proporción de la imagen */
}

.image-caption {
    background-color:black; /* Fondo blanco para el texto */
    color: white; /* Color del texto */
    padding: 5px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Esquinas redondeadas */
    margin-top: 5px; /* Espacio entre la imagen y el texto */
    font-size: 30px;
    border-bottom: 3px solid red;
}

.footer-title {
    text-align: center;
    color: white;
    margin-top: 20px;
}

.title-container {
    text-align: center; /* Centrar el texto */
    margin-top: 20px; /* Espacio arriba del título */
}

.section-title {
    background-color: white; /* Fondo blanco */
    color: black; /* Color del texto */
    padding: 10px; /* Espacio alrededor del texto */
    display: inline-block; /* Para que el fondo blanco se ajuste al texto */
    border-radius: 5px; /* Esquinas redondeadas */
}
.button, .image-item {
    padding: 10px; /* Espacio alrededor de los elementos */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
}

.facebook-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* Espacio alrededor */
}

.facebook-link {
    display: flex;
    align-items: center;
    background-color: #3b5998;
    color: white;
    font-size: 20px; /* Tamaño del texto */
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.facebook-link i {
    font-size: 20px; /* Tamaño del ícono */
    margin-right: 8px; /* Espacio entre ícono y texto */
}

.facebook-link:hover {
    background-color: #2d4373;
}
.instagram-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* Espacio alrededor */
}

.instagram-link {
    display: flex;
    align-items: center;
    background-color: #E1306C; /* Color de fondo de Instagram */
    color: white;
    font-size: 20px; /* Tamaño del texto */
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.instagram-link i {
    font-size: 20px; /* Tamaño del ícono */
    margin-right: 8px; /* Espacio entre ícono y texto */
}

.instagram-link:hover {
    background-color: #C13584; /* Color más oscuro al pasar el ratón */
}
@media (max-width: 600px) {
    /* Ajustes específicos para pantallas pequeñas */
    .image-gallery {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
}
.number{
    font-size: 24px; /* Tamaño del texto */
    color: white; /* Cambia el color del texto a blanco */
     background-color: white; /* Color de fondo blanco */
    padding: 5px; /* Espacio alrededor del texto */
}